<!DOCTYPE html>
<html>
<head>
	<title>Bus/总线/发布订阅/观察者模式</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="./js/vue.js"></script>
	<style type="text/css">
		.fade-enter,
		.fade-leave-to {
			opacity: 0;
		}
		.fade-enter-active,
		.fade-leave-active {
			transition: opacity 1s;
		}
		
		
	</style>
</head>
<body>
	<div id="app">
		<transition-group name="fade">   
			<!-- tansition-group相当于给它包裹的每个元素都加上了transition标签 -->
			<div v-for="(item, index) in list" :key="index">
				{{item}}
				
			</div>
				
		</transition-group>


		
		<button @click="add">改变</button>
		
		
	</div>
</body>
<script type="text/javascript">


	

	var vm = new Vue({
		el:"#app",
		data:{
			list:[]
	
		},
		methods:{
			add:function() {
				this.list.push("i love you ")
			}
		},
			

	})



		
</script>
</html>